<template>
  <div>
    <h1>【aty-input-number】 component demo</h1>
    <p>【aty-input-number】 本质</p>
    <aty-row class="fd-input-number-box">
      <aty-row>
        <aty-title level="4">1.【aty-input-number】 基础数据双向绑定 </aty-title>
        <aty-input-number :maxNumber="10" :minNumber="1" v-model="test" name="test" />
        <aty-text>{{test}}</aty-text>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-input-number】 step </aty-title>
        <aty-input-number :maxNumber="10" :minNumber="1" :step="2.5" :value="9" />
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-input-number】 大小，通过 :value设置默认值 </aty-title>
        <aty-input-number :value="2" size="small" />
        <aty-input-number :value="2" size="default" />
        <aty-input-number :value="2" size="large" />
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-input-number】 禁用 </aty-title>
        <aty-input-number :value="2" :disabled="disabled" />
        <aty-button type="primary" @click="disabled = !disabled">Toggle Disabled</aty-button>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-input-number】 change事件 </aty-title>
        <aty-input-number name="changeTest" @change="change" />
      </aty-row>
      <aty-row>
        <aty-title level="4">6 .【aty-input-number】 验证 </aty-title>
        <aty-input-number
          :value="2"
          elementId="jsInputNumber"

          :label="'number'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="number"

          :required="true"
          :showMessage="true" />
      </aty-row>
    </aty-row>
    <aty-row>
        <aty-title level="4">7.【aty-input-number】 设置小数位数 </aty-title>
        <aty-input-number name="changeTest" :precision="4" v-model="value" />
      </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      test: 5,
      disabled: true,
      value:1,
    }
  },
  methods: {
    change (value, name) {
      alert('change value:' + value + 'name:' + name)
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-input-number-box {
        margin: 20px;
        text-align: left;
    }
 </style>
